<template>
  <div class="ruzhujigou">
    <PublicHead></PublicHead>
    <div class="ruzhu">
      <div class="ruzhuBox">

        <div class="title">
          <div>入驻机构申报</div>
          <div>/&ensp;RUZHUJIGOUSHENBAO</div>
        </div>
        <div class="title2">
          【企业基本情况】
        </div>
        <div class="ruzhuForm">
          <el-form ref="form" label-position="top" :model="upload" :rules="rongziRules">
            <el-row>
              <el-col :span="12" class="form-item">
                <el-form-item label="注册时间（存续两年）" prop="registerLogin">
                  <el-date-picker v-model="upload.registerLogin" type="date" placeholder="选择日期"
                    value-format="yyyy-MM-dd hh:mm:ss">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="form-item">
                <el-form-item label="固定场所" prop="fixedPlace">
                  <el-input v-model="upload.fixedPlace" placeholder="请输入固定场所"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12" class="form-item">
                <el-form-item label="人员配置情况" prop="staffingSituation">
                  <el-input v-model="upload.staffingSituation" placeholder="请输入人员配置情况"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12" class="form-item">
                <el-form-item label="专业团队" prop="professionalTeam">
                  <el-input type="textarea" :rows="3" placeholder="请输入专业团队" v-model="upload.professionalTeam">
                  </el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12" class="form-item">
                <el-form-item label="服务客户数量及符合重点支持方向" prop="serveClientsDirection">
                  <el-input type="textarea" :rows="3" placeholder="请输入服务客户数量及符合重点支持方向"
                    v-model="upload.serveClientsDirection">
                  </el-input>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>
        <div>
          <div class="title2">
            【申请资料】
          </div>
          <el-table :data="tableData" class="my-table" border style="width: 100%;">
            <el-table-column width="60px" align="center" label="序号" prop="id"
              :label-class-name="'table-header'"></el-table-column>
            <el-table-column width="100px" align="center" label="是否必填" :label-class-name="'table-header'">
              <template slot-scope="scope">
                <span v-if="scope.row.id !== '4' && scope.row.id !== '5' && scope.row.id !== '6'"
                >是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column width="310px" label="资料名称" prop="name" :label-class-name="'table-header'">
              <template slot-scope="scope">
                <span class="name">{{ scope.row.name | flitt() }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="附件" width="150" :label-class-name="'table-header'">
              <template slot-scope="scope">
                <el-icon class="iconDownload" name="download"></el-icon>
                <span class="text" @click="download(scope.row)">{{ scope.row.moban }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
              <template slot-scope="{row}">
                <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" :on-preview="handlePreview"
                  :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }" :before-upload="beforelod"
                  :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row.id, row.name, '资料上传') }"
                  :on-remove="(response, file, fileList) => { return beforeRemove(response, file, fileList, row.id, row.name, '资料上传') }"
                  :before-remove="handbefore" multiple :limit="3" :on-exceed="handleExceed" :accept="'.pdf'"
                  :file-list="fileList">
                  <el-icon class="iconDownload1" name="upload2"></el-icon>
                  <span class="text1">上传文件</span>
                  <span v-if="false" class="text1">{{ scope.row.file }}</span>
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column align="center" label="辅助证明文件上传" :label-class-name="'table-header'">
              <template slot-scope="{row}">
                <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" :on-preview="handlePreview"
                  :data="uploadfile(row.name, '辅助证明文件上传')" :headers="{ Authorization: token }" :before-upload="beforelod"
                  :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row.id, row.name, '辅助证明文件上传') }"
                  :on-remove="(response, file, fileList) => { return beforeRemove(response, file, fileList, row.id, row.name, '资料上传') }"
                  :before-remove="handbefore" multiple :limit="3" :on-exceed="handleExceed" :accept="'.pdf'"
                  :file-list="fileList">
                  <span v-if="false">{{ row.name }}</span>
                  <el-icon class="iconDownload1" name="upload2"></el-icon>
                  <span class="text1">上传文件</span>
                  <span v-if="false" class="text1">{{ scope.row.file }}</span>
                </el-upload>
              </template>
            </el-table-column>

          </el-table>
          <div class="title2">
            【相关联系科室】
          </div>
          <div class="lianxi">
            <div>兰州市中小企业公共服务平台</div>
            <div>信息科</div>
            <div>5111302</div>
          </div>
          <div class="tableFoot">
            <button @click="submit(4, '保存成功')">保存</button>
            <button @click="submit(0, '提交成功')">提交</button>
            <button @click="quxiao">取消</button>
          </div>
        </div>
      </div>

    </div>
    <PublicFoot></PublicFoot>
  </div>
</template>

<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { http } from '@/until/http'
import { shifan_add2, download, moban_list, upload_file } from '../api/api'
export default {
  data() {
    return {
      https: http,
      uploadData: {
      },
      resData: {},
      fileList: [],
      response: '',
      token: '',
      upload: {
        "userId": this.$store.state.userId,
        "level": 3,
        "applicationType": 2,
        "fixedPlace": "",
        "professionalTeam": "",
        "registerLogin": "",
        "serveClientsDirection": "",
        "staffingSituation": "",
        "dataType": 0,
        "file1": { "1,兰州市中小企业服务平台入驻申请表_资料上传": [] },
        "file2": { "1,兰州市中小企业服务平台入驻申请表_辅助证明文件上传": [] },
        "file3": { "2,与原件核对无误的机构登记、注册证照复印件_资料上传": [] },
        "file4": { "2,与原件核对无误的机构登记、注册证照复印件_辅助证明文件上传": [] },
        "file5": { "3,上年度服务的客户证明材料_资料上传": [] },
        "file6": { "3,上年度服务的客户证明材料_辅助证明文件上传": [] },
        "file7": { "4,从事相应服务领域的资质证明_资料上传": [] },
        "file8": { "4,从事相应服务领域的资质证明_辅助证明文件上传": [] },
        "file9": { "5,由国家、省、市有关部门和行业组织授予荣誉称号的证明文件并留存与原件核对无误的证书复印件_资料上传": [] },
        "file10": { "5,由国家、省、市有关部门和行业组织授予荣誉称号的证明文件并留存与原件核对无误的证书复印件_辅助证明文件上传": [] },
        "file11": { "6,其他能证明本机构服务能力和实力的材料_资料上传": [] },
        "file12": { "6,其他能证明本机构服务能力和实力的材料_辅助证明文件上传": [] },
        pprovalStatus: ''
      },
      formData: {
        registerLogin: "",
        fixedPlace: "",
        staffingSituation: "",
        professionalTeam: "",
        serveClientsDirection: "",
      },
      tableData: [
        { id: '1', name: "1,兰州市中小企业服务平台入驻申请表", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663588426550714370', type: 'doc' },
        { id: '2', name: "2,与原件核对无误的机构登记、注册证照复印件", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663588426550714370', type: 'doc' },
        { id: '3', name: "3,上年度服务的客户证明材料", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663588643383648258', type: 'doc' },
        { id: '4', name: "4,从事相应服务领域的资质证明", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663588643383648258', type: 'doc' },
        { id: '5', name: "5,由国家、省、市有关部门和行业组织授予荣誉称号的证明文件并留存与原件核对无误的证书复印件", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663588643383648258', type: 'doc' },
        { id: '6', name: "6,其他能证明本机构服务能力和实力的材料", status: "待审核", file: '上传文件', moban: '下载附件', zhengming: '上传辅助证明文件', fileId: '1663588643383648258', type: 'doc' },
      ],
      rongziRules: {
        registerLogin: [
          { required: true, message: '注册时间', trigger: 'blur' },
        ],
        fixedPlace: [
          { required: true, message: '请输入固定场所', trigger: 'blur' },
        ],
        staffingSituation: [
          { required: true, message: '请输入人员配置情况', trigger: 'blur' },
        ],
        professionalTeam: [
          { required: true, message: '请输入团队', trigger: 'blur' },
        ],
        serveClientsDirection: [
          { required: true, message: '请输入服务客户数量及符合重点支持方向', trigger: 'blur' },
        ],
      },
      data: {
        userId: '',
        applicationType: '0',
        level: '0',
        dataType: '0'
      }
    };
  },
  methods: {
    uploadfile(rowname, type) {
      return { userId: this.$store.state.userId, name: rowname, type: type }
    },
    quxiao() {
      this.$router.go(-1)
    },
    //提交表单
    submit(state, name) {
      console.log(this.upload);
      this.upload.pprovalStatus = state
      if (state == '4') {
        shifan_add2(this.upload).then((res) => {
          if (res.data.state == '20000') {
            this.$message({
              message: name,
              type: 'success',
            });
            this.$router.push('/homepage');
          } else {
            this.$message.error(res.data.message);
          }
        })
      } else if (state == '0') {
        let wj1 = Object.values(this.upload.file1)
        let wj2 = Object.values(this.upload.file3)
        let wj3 = Object.values(this.upload.file5)
        if (wj1[0].length <= 0 || wj2[0].length <= 0 || wj3[0].length <= 0) {
          this.$message.error('您有必填项的文件未上传')
        } else {
          console.log(this.upload, "1111111111111111111111111111");
          shifan_add2(this.upload).then((res) => {
            if (res.data.state == '20000') {
              this.$message({
                message: name,
                type: 'success',
              });
              this.$router.push('/homepage');
            } else {
              this.$message.error(res.data.message);
            }
          })
        }
      }
    },
    download(row) {
      var fileData = {
  1: {
    url: './file/jigou/兰州市中小企业公共服务平台入驻申请表.docx',
    fileName: row.name
  },
};

if (fileData.hasOwnProperty(row.id)) {
  var data = fileData[row.id];
  let link = document.createElement("a");
  link.href = data.url;
  link.setAttribute("download", data.fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}else{
  this.$message({
          message: '暂无附件',
          type: 'warning'
        });
}
    },
    beforelod() {

    },
    //点击删除按钮
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //预览文件
    handlePreview(file) {
      upload_file({ fileId: file.response.data }).then((res) => {
        console.log(res);
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))

        window.open(url)
      })

    },
    //预览文件
    handlePreviewone(file) {
      upload_file({ fileId: file }).then((res) => {
        console.log(res);
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))

        window.open(url)
      })

    },
    //超出限制
    handleExceed() {
      this.$message.warning('每一项只能上传3个文件');
    },
    //点击移除的对话框
    beforeRemove(response, file, fileList, id, name, type) {
      if (response && response.status == "success") {
        console.log(response, file, fileList, id, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          for (var key in this.upload) {
            if (key.slice(4, 6) == (id * 2) - 1) {
              console.log(this.upload[key][name]);
              var index = this.upload[key][name].indexOf(response.response.data)
              this.upload[key][name].splice(index, 1)
              console.log(this.upload[key][name]);
            }
          }
        } else if (type == '辅助证明文件上传') {
          name = name + '_辅助证明文件上传'
          for (var keys in this.upload) {
            if (keys.slice(4, 6) == (id * 2)) {
              console.log(this.upload[keys][name]);
              var index = this.upload[keys][name].indexOf(response.response.data)
              this.upload[keys][name].splice(index, 1)
              console.log(this.upload[keys][name]);
            }
          }
        }
      }
    },
    handbefore(file) {
      return this.$confirm(`确定移除 ${file.name}?`)
    },
    //上传成功的回调
    handleSuccess(response, file, fileList, id, name, type) {
      if (response && response.state == '20000') {
        console.log(response, file, fileList, id, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          for (var key in this.upload) {
            if (key.slice(4, 6) == (id * 2) - 1) {
              this.upload[key][name].push(response.data)
              // console.log( this.upload[key][name].push(response.data));
              console.log(this.upload);
            }
          }
        } else if (type == '辅助证明文件上传') {
          name = name + '_辅助证明文件上传'
          for (var keys in this.upload) {

            if (keys.slice(4, 6) == (id * 2)) {
              console.log(this.upload[keys]);
              this.upload[keys][name].push(response.data)
              console.log(this.upload);
            }
          }
        }
      }

    }
  },
  mounted() {
    this.token = localStorage.getItem('token')
    this.uploadData.userId = this.$store.state.userId

    moban_list({ applicationType: 0 }).then((res) => {
      console.log(res);
    })
  },
  filters: {
    flitt(name) {
      console.log(name);
      var name1 = name.split(',')
      var name2 = name1.pop()
      console.log(name2);
      return name2.toString()
    }
  },
  components: {
    PublicHead,
    PublicFoot,
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
  display: none !important;
}

.lianxi {
  display: flex;
  margin-bottom: 50px;

  div {
    width: 230px;
    height: 55px;
    background: #FAFAFA;
    border: 2px solid #EEEEEE;
    line-height: 55px;
    text-align: center;
  }

  div:nth-of-type(1) {
    width: 30%;
  }
}

.ruzhu {
  width: 100%;
  display: flex;
  justify-content: center;

  .ruzhuBox {
    width: 1220px;
    height: 100%;
    background: #FFFFFF;
    margin: 30px;
  }
}

.tableFoot {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 30px;

  button {
    margin: 0px 10px;

    &:hover {
      cursor: pointer;
    }
  }

  button:nth-of-type(1) {
    width: 98px;
    height: 40px;
    background: #F39200;
    border: 0;
    border-radius: 3px 3px 3px 3px;
    color: white;
  }

  button:nth-of-type(2) {
    width: 98px;
    height: 40px;
    background: #2797E8;
    border-radius: 3px 3px 3px 3px;
    border: 0;

    color: white;
  }

  button:nth-of-type(3) {
    width: 98px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 3px 3px 3px 3px;
    color: white;
    border: 0;
  }
}

.ruzhuBox {
  width: 1220px;
  height: 100%;
  background: #FFFFFF;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 50px;

  .title {
    display: flex;

    div:nth-of-type(1) {
      width: 120px;
      height: 50px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #262626;
      line-height: 50px;
      margin-bottom: 20px;
      border-bottom: 4px #1285D7 solid;

    }

    div:nth-of-type(2) {
      height: 50px;
      font-size: 15px;
      font-family: Arial;
      font-weight: 400;
      color: #DCDCDC;
      line-height: 50px;
      margin-right: 5px;

      border-bottom: 4px #1285D7 solid;

    }

    div:nth-of-type(3) {
      width: 189px;
      height: 50px;
      font-size: 15px;
      font-family: Arial;
      font-weight: 400;
      color: #DCDCDC;
      line-height: 50px;

      border-bottom: 4px #1285D7 solid;

    }

  }

  .title2 {
    width: 150px;
    height: 40px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
  }
}

.name {
  width: 208px;
  height: 45px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FD8544;
}

.text {
  cursor: pointer;
  color: #1285D7;
}

.iconDownload {
  height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1285D7;
}

.el-table__header {
  background-color: #1285D7 !important;
  color: white;
}

::v-deep .el-table__header th.is-leaf,
::v-deep .el-table__header th.gutter {
  background-color: #1285D7 !important;
  color: white;
  font-size: 16px;
}

.status {
  width: 48px;
  height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #D62502;
}

.el-button--primary {
  background-color: #fd8544;
  border-color: #fd8544;
}
</style>